<template>
	<view class="pageItem">
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-gengduo-copy" @tap="backPage"></view>
			<view class="text">订单管理</view>
		</view>
		<view class="clear_box"></view>
		<view class="head">
			<view class="type_item">
				<view class="type_box">
					<view class="type" :class="order_type == 'my' ? 'type_s':''" @click="orderTypeChange('my')">我的订单</view>
					<view class="type" :class="order_type == 'breed' ? 'type_s':''" @click="orderTypeChange('breed')">种植订单</view>
				</view>
			</view>
			<view class="tabber">
				<view class="tab" :class="type == 'all' ? 'tab_s':''" @click="typeChange('all')">全部</view>
				<view class="tab" :class="type == '0' ? 'tab_s':''" @click="typeChange('0')">待付款</view>
				<view class="tab" :class="type == '1' ? 'tab_s':''" @click="typeChange('1')">待发货</view>
				<view class="tab" :class="type == '2' ? 'tab_s':''" @click="typeChange('2')">待收货</view>
				<view class="tab" :class="type == '3' ? 'tab_s':''" @click="typeChange('3')">已完成</view>
			</view>
		</view>
		<view class="page_bg"></view>
		<view class="list">
			<block v-for="(item,index) in list">
				<view class="order">
					<view class="title">
						<view class="no">订单号：2020006623232302</view>
						<view class="status" v-if="item.status == '0'">待付款</view>
						<view class="status" v-if="item.status == '1'">待发货</view>
						<view class="status" v-if="item.status == '2'">待收货</view>
						<view class="status" v-if="item.status == '3'">交易完成</view>
						<view class="status" v-if="item.status == '4'">交易关闭</view>
					</view>
					<view class="con">
						<image class="c_img" src="../../static/img02/goods.png"></image>
						<view class="c_main">
							<view class="c_m_tit">特级紫红袍茶叶浓香型礼盒装500g（62泡）</view>
							<view class="c_m_money"><view class="txt">￥24.00</view><view class="num">x1</view></view>
						</view>
					</view>
					<view class="msg">
						<view class="price">实付款<label class="p2">￥24.00</label></view>
					</view>
					<view class="tools">
						<view class="btn b2" data-url="/pages/order/orderDetail" @click="gotopage">查看详情</view>
						<view class="btn b2" v-if="item.status == '0' || item.status == '1'">取消订单</view>
						<view class="btn" v-if="item.status == '0'" data-url="/pages/order/orderDetail" @click="gotopage">去支付</view>
						<view class="btn" v-if="item.status == '1'">提醒发货</view>
						<view class="btn b2" v-if="item.status == '2'" data-url="/pages/order/orderLogistics" @click="gotopage">查看物流</view>
						<view class="btn" v-if="item.status == '2'">确认收货</view>
						<view class="btn b2" v-if="item.status == '4'">删除订单</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_type:'my',
				type: 'all',
				list:[{status:'0'},{status:'1'},{status:'2'},{status:'3'},{status:'4'}]
			}
		},
		onLoad(e) {
			if(e.type){
				this.type = e.type;
			}
		},
		methods: {
			orderTypeChange(_type){
				if(this.order_type != _type){
					this.order_type = _type;
				}
			},
			typeChange(_type){
				if(this.type != _type){
					this.type = _type;
				}
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>
<style>
page{
	background: #E0ECEA;
}
.header{
	background-color: #024D4F !important;
}
.header .text{
	background-color: #024D4F !important;
	color: #fff;
}
.header .back{
	color: #fff;
}
.pageItem{
	width: 100%;
	box-sizing: border-box;
}
.pageItem *{
	box-sizing: border-box;
}
</style>
<style lang="scss">
.head{
	width: 100%;
	position: fixed;
	z-index: 98;
	height: 28vw;
	background: #024D4F;
	.type_item{
		width: 100%;
		padding: 3vw 4% 0;
		height: 14vw;
		.type_box{
			width: 100%;
			height: 11vw;
			display: flex;
			align-items: center;
			background: #013637;
			border-radius: 4vw;
			.type:not(:first-of-type)::before{
				content: '';
				position: absolute;
				width: 1rpx;
				height: 60%;
				background: #759192;
				left: 0;
				top: 20%;
			}
			.type{
				color: #759192;
				flex: 1;
				text-align: center;
				position: relative;
			}
			.type_s{
				color: #F7DEB5;
			}
		}
	}
	.tabber{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 14vw;
		padding: 0 4%;
		.tab{
			min-width: 80rpx;
			font-size: 4vw;
			height: 12vw;
			line-height: 12vw;
			font-weight: bold;
			color: #759192;
			text-align: center;
		}
		.tab_s{
			position: relative;
			color: #F7DEB5 !important;
			&::after{
				content: '';
				position: absolute;
				bottom: 8rpx;
				border-radius: 5rpx;
				height: 8rpx;
				width: 60%;
				background: #F7DEB5;
				left: 20%;
			}
		}
	}
}
.page_bg{
	position: fixed;
	width: 100%;
	height: calc(var(--status-bar-height) + 45vw);
	/* #ifdef H5 */
	height: calc(var(--status-bar-height) + 50vw + 44px);
	/* #endif */
	background: #024D4F;
	top: 0;
	left: 0;
	z-index: 6;
}
.list{
	position: relative;
	z-index: 8;
	display: inline-block;
	width: 100%;
	padding: 28vw 4% 3vw;
	.order{
		width: 100%;
		background: #ffffff;
		border-radius: 25rpx;
		margin-top: 25rpx;
		padding: 25rpx;
		.title{
			width: 100%;
			display: flex;
			align-items: center;
			padding-bottom: 5rpx;
			.no{
				flex: 1;
				font-size: 24rpx;
				color: #222222;
			}
			.status{
				font-size: 28rpx;
				color: #D20000;
			}
		}
		.con{
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			.c_img{
				width: 20vw;
				height: 20vw;
				border-radius: 15rpx;
			}
			.c_main{
				flex: 1;
				justify-content: space-between;
				padding-left: 20rpx;
				.c_m_tit{
					font-size: 30rpx;
					font-weight: bold;
					color: #222222;
					overflow:hidden; 
					text-overflow:ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2; 
				}
				.c_m_num{
					font-size: 24rpx;
					color: #999999;
					padding-top: 20rpx;
				}
				.c_m_money{
					width: 100%;
					display: flex;
					align-items: flex-end;
					.txt{
						flex: 1;
						font-size: 5vw;
						color: #D20000;
						font-weight: bold;
						padding-top: 10rpx;
					}
					.num{
						font-size: 26rpx;
						color: #999999;
					}
				}
			}
		}
		.msg{
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.m_t1{
				font-size: 26rpx;
				color: #9C9C9C;
			}
			.price{
				padding-left: 10rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		.msg2{
			width: 100%;
			border-radius: 10rpx;
			background: #F7F7F7;
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			.m_t2{
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}
			.price2{
				padding-left: 25rpx;
				color: #999999;
				font-size: 26rpx;
			}
		}
		.msg,.msg2{
			.p{
				font-weight: bold;
				font-size: 28rpx;
				color: #FD3633;
				padding-left: 10rpx;
			}
			.p2{
				font-weight: bold;
				font-size: 28rpx;
				padding-left: 10rpx;
			}
		}
		.tools{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 20rpx;
			.btn:not(:first-of-type){
				margin-left: 20rpx;
			}
			.btn{
				text-align: center;
				min-width: 20vw;
				background: #089396;
				color: #ffffff;
				font-size: 26rpx;
				border-radius: 5vw;
				padding: 0 25rpx;
				line-height: 9vw;
			}
			.b2{
				background: #ffffff;
				border: 1rpx solid #DDDDDD;
				color: #999999;
			}
			.b3{
				background: #ffffff;
				border: 1rpx solid #089396;
				color: #089396;
			}
		}
	}
}
</style>
